<template>
  <div>
    <div><router-link to="/">首页</router-link></div>
    <div id="chart_example">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'echarts',
  data () {
    return {
    }
  },
  mounted () {
    // let this_ = this
    let myChart = echarts.init(document.getElementById('chart_example'))
    // 我是华丽丽的分割线，下面是柱状图一
    // let option = {
    //   color: ['#f44'],
    //   tooltip: {
    //     trigger: 'axis',
    //     axisPointer: {
    //       type: 'shadow'
    //     }
    //   },
    //   xAxis: [
    //     {
    //       type: 'category',
    //       data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    //       axisTick: {
    //         alignWithLabel: true
    //       }
    //     }
    //   ],
    //   yAxis: [
    //     {
    //       type: 'value'
    //     }
    //   ],
    //   series: [
    //     {
    //       name: '每月花费',
    //       type: 'bar',
    //       barWidth: '60%',
    //       data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
    //     }
    //   ]
    // }
    // 我是华丽丽的的分割线，下面是折线图二
    // let option = {
    //   xAxis: {
    //     type: 'category',
    //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   series: [{
    //     data: [820, 932, 901, 934, 1290, 1330, 1320],
    //     type: 'line'
    //   }]
    // }
    // 我是华丽丽的的分割线，下面是可拖动曲线一
    var symbolSize = 20
    var data = [[-450, 0], [-350, 100], [0, 200], [0, -100], [300, -400]]

    let option = {
      title: {
        text: 'Try Dragging these Points(拖动点)'
      },
      tooltip: {
        triggerOn: 'none',
        formatter: function (params) {
          return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2)
        }
      },
      grid: {
      },
      xAxis: {
        min: -500,
        max: 500,
        type: 'value',
        axisLine: {onZero: false}
      },
      yAxis: {
        min: -500,
        max: 500,
        type: 'value',
        axisLine: {onZero: false}
      },
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'empty'
        },
        {
          type: 'slider',
          yAxisIndex: 0,
          filterMode: 'empty'
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          filterMode: 'empty'
        },
        {
          type: 'inside',
          yAxisIndex: 0,
          filterMode: 'empty'
        }
      ],
      series: [
        {
          id: 'a',
          type: 'line',
          smooth: true,
          symbolSize: symbolSize,
          data: data
        }
      ]
    }

    setTimeout(function () {
      // Add shadow circles (which is not visible) to enable drag.
      myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
          return {
            type: 'circle',
            position: myChart.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: symbolSize / 2
            },
            invisible: true,
            draggable: true,
            ondrag: echarts.util.curry(onPointDragging, dataIndex),
            onmousemove: echarts.util.curry(showTooltip, dataIndex),
            onmouseout: echarts.util.curry(hideTooltip, dataIndex),
            z: 100
          }
        })
      })
    }, 0)

    window.addEventListener('resize', updatePosition)

    myChart.on('dataZoom', updatePosition)

    function updatePosition () {
      myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
          return {
            position: myChart.convertToPixel('grid', item)
          }
        })
      })
    }

    function showTooltip (dataIndex) {
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
      })
    }

    function hideTooltip (dataIndex) {
      myChart.dispatchAction({
        type: 'hideTip'
      })
    }

    function onPointDragging (dataIndex, dx, dy) {
      data[dataIndex] = myChart.convertFromPixel('grid', this.position)

      // Update data
      myChart.setOption({
        series: [{
          id: 'a',
          data: data
        }]
      })
    }

    // 我是华丽丽的分割线，下面的代码是通用的，别删。
    myChart.setOption(option)
    // 建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function () { myChart.resize() })
  },
  methods: {},
  watch: {},
  created () {

  }
}
</script>

<style scoped>
  h2{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  #chart_example{
    width: 50%;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
  }
</style>
